import { List, Card } from 'antd'
import Meta from 'antd/lib/card/Meta'
import './ProgramListPage.css'
import MemberDetails from '../ProgramListComponents/MemberDetails'
import ProgressDetails from '../ProgramListComponents/ProgressDetails'
import ContractDetails from '../ProgramListComponents/ContractDetails'
import { useState } from 'react'
import ProgramHeader from '../ProgramListComponents/ProgramHeader'

interface ProgramListPage {
  id: string //项目序号
  name: string //项目名称
  member?: memberConfig
  progress?: progressConfig
  contract?: contractConfig
}

interface memberConfig {
  leaderName: string
  memberNum: number
  workHour: number
}

interface progressConfig {
  id: string
  date: string
  success: number
  milepost: TableProps
}

interface TableProps {
  milepost: Record<string, string | number>
}

interface contractConfig {
  contract: string
  contractCash: string
  income: string
  incomeCash: string
  invoice: string
  invoiceCash: string
  collection: string
  collectionCash: string
}

const ProgramListPage = (props: any) => {
  const [search, setSearch] = useState('')

  const changeSerchHandler = (search: string) => {
    setSearch(search)
  }

  const [option, setOption] = useState('all')

  const changeSelectHandler = (option: string) => {
    setOption(option)
  }

  const fuzzyQuery = (name: string, search: string) => {
    let reg = new RegExp(search)
    return reg.test(name)
  }

  const getData = (option: string, search: string) => {
    let filterData
    if (option === 'all') {
      filterData = props.programData
      filterData = filterData.filter((item: any) =>
        fuzzyQuery(item.name, search)
      )
    } else if (option === 'zero') {
      filterData = props.programData.filter(
        (item: any) => item.progress.success === 0
      )
      filterData = filterData.filter((item: any) =>
        fuzzyQuery(item.name, search)
      )
    } else if (option === 'incomplete') {
      filterData = props.programData.filter(
        (item: any) => item.progress.success < 100
      )
      filterData = filterData.filter((item: any) => item.progress.success > 0)
      filterData = filterData.filter((item: any) =>
        fuzzyQuery(item.name, search)
      )
    } else if (option === 'complete') {
      filterData = props.programData.filter(
        (item: any) => item.progress.success === 100
      )
      filterData = filterData.filter((item: any) =>
        fuzzyQuery(item.name, search)
      )
    }

    return filterData
  }

  let filterData = getData(option, search)

  return (
    <>
      <ProgramHeader
        onSearchChange={changeSerchHandler}
        onOptionChange={changeSelectHandler}
      />
      <List
        rowKey="id"
        grid={{
          gutter: 16,
          xs: 1,
          sm: 2,
          md: 3,
          lg: 3,
          xl: 4,
          xxl: 4,
        }}
        dataSource={[...filterData]}
        renderItem={(item) => {
          if (item && item.id) {
            return (
              <List.Item key={item.id}>
                <Card hoverable>
                  <Meta
                    title={<h3 style={{ fontWeight: 'bold' }}>{item.name}</h3>}
                  />
                  <MemberDetails member={item.member} />
                  <ProgressDetails id={item.id} progress={item.progress} />
                  <ContractDetails contract={item.contract} />
                </Card>
              </List.Item>
            )
          }
          
        }}
      />
    </>
  )
}

export default ProgramListPage
